<template>
	<view class="content">
		<view class="top">
			<view class="my">
				<view class="my_top">
					<view class="my_img">
					<image src="/static/logo.png" alt=""></image>
				</view>
				<view class="my_name">
					{{username}}
				</view>
				</view>
				<view class="my_bottom">
					<view class="my_bottom_elet">
						<view class="elet">
							关注
						</view>
						<view class="number">
							321
						</view>
					</view>
					<view class="my_bottom_elet">
						<view class="elet">
							收藏
						</view>
						<view class="number">
							321
						</view>
					</view>
					<view class="my_bottom_elet">
						<view class="elet">
							粉丝
						</view>
						<view class="number">
							321
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		<view class="system_bottom">
			<view class="system_bottom_elet"  @click="to_guanli">
				<view class="system_bottom_elet_img">
					<image src="../../static/img/wode_1.png" mode=""></image>
				</view>
				<view class="system_bottom_elet_tit">
					账号管理
				</view>
			</view>
			<view class="system_bottom_elet">
				<view class="system_bottom_elet_img">
					<image src="../../static/img/wode_2.png" mode=""></image>
				</view>
				<view class="system_bottom_elet_tit">
					账号与安全
				</view>
			</view>
			<view class="system_bottom_elet">
				<view class="system_bottom_elet_img">
					<image src="../../static/img/wode_3.png" mode=""></image>
				</view>
				<view class="system_bottom_elet_tit">
					关怀模式
				</view>
			</view>
			<view class="system_bottom_elet">
				<view class="system_bottom_elet_img">
					<image src="../../static/img/wode_4.png" mode=""></image>
				</view>
				<view class="system_bottom_elet_tit">
					客服中心
				</view>
			</view>
			<view class="system_bottom_elet">
				<view class="system_bottom_elet_img">
					<image src="../../static/img/wode_5.png" mode=""></image>
				</view>
				<view class="system_bottom_elet_tit">
					帮助反馈
				</view> 
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				username:''
			}
		},
		onLoad() {
			this.username=getApp().globalData.myusername;
			console.log("name"+this.username)
		},
		methods: {
			to_guanli(){
				uni.navigateTo({
					url:"./guanli/guanli"
				})
			}
		}
	}
</script>

<style>
	page{
		background-image: url(/static/img/backbg.jpg);
		background-repeat:no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed
	}
	.content{
		padding-bottom: 80rpx;
	}
	.top{
		/* border: solid 1px red; */
		width: 750rpx;
		/* padding-bottom: 10rpx; */
		border-radius: 500% /0 0 100% 100% ;
		overflow: hidden;
		background:url(/static/img/my_top_bk.png) ;
		background-repeat:no-repeat;
		background-size:100% 100%;
		
	}
	.my{
		/* border: solid 1px red; */
		width: 700rpx;
		/* height: 300rpx; */
		margin: 100rpx auto 0rpx;
		border-radius: 40rpx 40rpx 0 0;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: rgba(238,238,238,0.9 );
	}
	.my_top{
		/* border: solid 1px red; */
		display: flex;
		flex-direction: row;
	}
	
	.my_img{
		/* border: red solid 1px; */
		width: 150rpx;
		height: 150rpx;
		background-image: url(/static/img/my_bk.png);  
		background-repeat:no-repeat;
		background-size:100% 100%;
		
	}
	.my_img image{
		/* border: solid 1px red; */
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin: 25rpx;
		
			}
	.my_name{
		/* border: solid 1px red; */
		margin-left: 20rpx;
		line-height: 150rpx;
		font-weight: bold;
		font-size: 34px;
	}
	.my_bottom{
		
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 20rpx;
	}
	.my_bottom_elet{
		/* border: solid 1px red; */
		width: 200rpx;
		text-align: center;
		font-size: 30rpx;
	}
	.system_bottom{
		
		width: 700rpx;
		margin: 40rpx auto;
		border-radius: 40rpx;
		background-color: rgba(238,238,238,0.7);
		padding-top: 20rpx;
		box-sizing: border-box;
		padding-bottom: 20rpx;
	}
	.system_bottom_elet{
		/* border: solid 0.1rpx red; */
		width: 650rpx;
		height: 120rpx;
		background-color: rgba(240,248,255,0.7);
		box-sizing: border-box;
		border-radius: 20rpx;
		margin: 20rpx auto;
		padding:20rpx;
		display: flex;
		flex-direction: row;
		box-shadow: 5rpx 5rpx 5rpx 5rpx #ccc;
		
	}
	.system_bottom_elet_img{
		/* border: solid 1px red; */
		width: 80rpx;
		height: 80rpx;
		margin-left: 10rpx;
	}
	.system_bottom_elet_img image{
		width: 100%;
		height: 100%;
	}
	.system_bottom_elet_tit{
		font-size: 48rpx;
		line-height: 80rpx;
		margin-left: 40rpx;
	}
</style>
